<template>
  <div id="examinpaper_datamanage" class="container">
    <div v-show="!reportDetailParam.visible" class="content">
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <span>测评时间：</span>
            <el-date-picker
              v-model="searchParam.date"
              type="daterange"
              range-separator="-"
              @change="selectTimeChange"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-select
              v-if="selectSchoolVisible"
              v-model="searchParam.campusId"
              @change="changeSchool"
              style="width:1.8rem;"
              clearable
              filterable
              placeholder="所有校区"
            >
              <el-option
                v-for="(row,index) in selectSchoolList"
                :key="index"
                :label="row.name"
                :value="row.campusId"
              ></el-option>
            </el-select>
            <el-input style="width:2.5rem;" v-model="searchParam.keyword" clearable placeholder="搜索 学员姓名/手机号"></el-input>
            <div @click="search(1)" class="search_btn"
              style="margin-left:0.1rem;" >搜索</div>
            <div class="btn_user_defined" style="margin-left:0.1rem;" @click="resetParam">重置</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0" style="table-layout:fixed;">
            <thead class="thead">
              <tr>
                <td style="width: 0.8rem;">序号</td>
                <td style="width: 1.5rem;">学员姓名</td>
                <td style="width: 1.5rem;">手机号</td>
                <td style="width: 2rem;" v-if="selectSchoolVisible">校区名称</td>
                <td style="width: 4rem;">测评试卷</td>
                <td style="width: 1rem;">得分</td>
                <td style="width: 2rem;">测评时间</td>
                <td style="width: 1.5rem;">提交状态</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody" v-if="tableList&&tableList.length>0">
              <tr v-for="(row,index) in tableList" :key="index">
                <td>{{row._index}}</td>
                <td>{{row.studentName}}</td>
                <td>{{row.phoneNo}}</td>
                <td v-if="selectSchoolVisible">{{row.campusName}}</td>
                <td>{{row.paperName}}</td>
                <td>{{row.studentScore}}</td>
                <td>{{row.updateTime}}</td>
                <td>{{row.statusName}}</td>
                <td>
                  <el-button type="text" @click="detailClick(row)">查看详情</el-button>
                  <el-button type="text" @click="queryClick(row)">查看报告</el-button>
                  <el-button type="text" @click="shareClick(row)">分享报告</el-button>
                </td>
              </tr>
            </tbody>
            <tbody class="tbody" v-else>
              <tr>
                <td colspan="9">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="searchParam.currPage"
          @size-change="pageSizeChange"
          @current-change="currentPageChange"
          :total="searchParam.total"
        ></el-pagination>
      </div>
    </div>
    <div v-if="reportDetailParam.visible" class="content">
      <reportDetail ref="reportDetail" @hide="hideReportDetail"></reportDetail>
    </div>
    <el-dialog
      title="分享报告"
      :visible.sync="popupShare.visible"
      width="10rem"
      :close-on-click-modal="false"
      custom-class="el-dialog-bg"
    >
      <reportShare ref="reportShare"></reportShare>
    </el-dialog>
  </div>
</template>

<script>
import reportShare from './common/evealuation_share'
import reportDetail from './examinpaper_data_detail'
let vm;
let user;
export default {
  components: { reportShare,reportDetail},
  data() {
    return {
      reportDetailParam:{
        visible:false,
      },
      searchParam:{
        campusId:this.$store.state.campusId,//校区id
        date:[],//开始结束日期
        startTime:"",//开始日期
        endTime:"",//结束日期
        keyword:'',//关键字：学员姓名、手机号
        currPage: 1,//当前页
        pageSize: 10,//分页大小
        total:0,
      },
      popupShare:{
        visible:false
      },
      selectSchoolVisible: false,
      selectSchoolList: [],
      tableList:[]
    };
  },
  methods: {
    campusChange : function(campusId) { //校区改变
      this.searchParam.campusId=campusId;
      this.search(1);
    },
    resetParam(){
      this.searchParam.date=[];
      this.searchParam.startTime='';
      this.searchParam.endTime='';
      this.searchParam.keyword='';
      this.searchParam.campusId=this.$store.state.campusId;
      if (this._roleMode == 1) {
        this.searchParam.campusId="";
      }
      this.search(1);
    },
    /**搜索 */
    search(pgIndex){
      this.searchParam.currPage=pgIndex||this.searchParam.currPage;
      let param={
        // userId:"",
        // userName:"",
        // userPhone:"",
        // reportId:"",
        startDate:this.searchParam.startTime,
        endDate:this.searchParam.endTime,
        campusId:this.searchParam.campusId,
        orgId:this._orgId,
        roleMode:this._roleMode,

        currPage: this.searchParam.currPage,//当前页
        pageSize: this.searchParam.pageSize,//分页大小
        keyWords: this.searchParam.keyword,
      };
      api.examinDataReportList(param).then(function(data){
        if(data.resultCode==2000){
          vm.tableList=data.list;
          vm.searchParam.total=data.totalCount||0;

          vm.tableList.forEach((ele,index)=>{
            ele._index=(index+1)+(vm.searchParam.currPage-1)*vm.searchParam.pageSize;
            ele._paperLevel="";
            ele._studentLevel="";
            if(ele.reportScoreDto){
              for(let k in ele.reportScoreDto.paperLevelMap){
                if(ele.reportScoreDto.paperLevelMap[k]){
                  ele._paperLevel=k;
                }
              }
              for(let k in ele.reportScoreDto.studentLevelMap){
                if(ele.reportScoreDto.studentLevelMap[k]){
                  ele._studentLevel=k;
                }
              }
            }
            
          });
        }
        else{
          vm.$message({
            type:"warning",
            message:data.message||"操作失败"
          });
        }
      });
    },
    /**页码回调 */
    pageSizeChange(val) {
      this.searchParam.pageSize=val;
      this.search(1);
      
    },
    /**页数回调 */
    currentPageChange(val) {
     this.search(val);
    },
    changeSchool(val){
      this.search(1);
    },
    selectTimeChange(val){
      if(val){
        this.searchParam.startTime=tool.DateToString(val[0],'yyyy-MM-dd 00:00:00');
        this.searchParam.endTime=tool.DateToString(val[1],'yyyy-MM-dd 23:59:59');
      }
      else{
        this.searchParam.startTime='';
        this.searchParam.endTime='';
      }
      this.search(1);
    },
    getSchoolListById(id) {
      this.selectSchoolVisible=true;
      api.campusListByOrg({ orgId: id }).then(function(data) {
        if (data.resultCode == 2000) {
          vm.selectSchoolList = data.list;
        }
      });
    },
    hideReportDetail(){
      this.reportDetailParam.visible=false;
      // this.searchParam.pageSize=10;
      // this.search(1);
    },
    detailClick(val){
      this.reportDetailParam.visible=true;
      this.$nextTick(_=>{
        this.$refs['reportDetail'].initData(val);
      })
    },
    queryClick(val){
      window.open(window.config.evaluationReportUrl+'/?reportId='+val.reportId,'blank');
    },
    shareClick(val){
      this.popupShare.visible=true;
      this.$nextTick(_=>{
        this.$refs['reportShare'].init(val);
      });
    },
  },
  mounted() {
    vm = this;
    let userInfo = tool.getItem(lsKey.user, true); //得到当前用户信息
    this._orgId=userInfo.orgId;
    this._roleMode=userInfo.roleMode;
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    
    if (userInfo.roleMode == 1) {
      this.searchParam.campusId="";
      this.getSchoolListById(userInfo.orgId);
    }
    this.search(1);
  }
};
</script>
<style lang="scss" scoped>
#examinpaper_datamanage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.4rem;
    line-height: 0.4rem;
  }
  .el-input__icon {
    line-height: 0.4rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
    width: 1.54rem;
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  .el-dialog-bg {
    border-radius: 0.1rem;
  }
  .el-dialog__body {
    padding: 0.1rem 0.2rem 0.2rem 0.2rem;
  }
  .el-dialog__header {
    padding: 0.2rem 0.3rem 0.1rem 0.3rem ;
  }
  .el-dialog__headerbtn {
    position: absolute;
    top: 0.15rem;
    right: 0.2rem;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 0.16rem;
  }
}
</style>

<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>